webpack 打包html文件

p.p1 { margin: 0.0px 0.0px 0.1px 28.3px; text-indent: -28.4px; font: 12.0px "Helvetica Neue"; color: #000000 }
span.s1 { }
span.s2 { font: 12.0px "PingFang SC" }
span.Apple-tab-span { white-space: pre }

1、安装webpack-html-plugin模块

$ npm install webpack-html-plugin —save-dev

2、webpack.config.js文件写入

var WebpackHtmlPlugin = require(‘webpack-html-plugin‘);

output: {

path: path.resolve(__dirname, ‘./dist‘),

publicPath: ‘/dist/‘,

filename: ‘[name].js‘

plugins: [

new WebpackHtmlPlugin({

template:‘forgetPass.html‘,

filename:‘forgetPass.html‘

}),

new WebpackHtmlPlugin({

template:’app/utils/crawTask/crawTaskProcess/websiteRange/failSheet.html’,

filename:‘utils/crawTask/crawTaskProcess/websiteRange/failSheet.html‘

})

]

时间： 2024-07-29 12:06:50

webpack 打包html文件的相关文章

webpack打包js文件

1.安装node.js 2.新建空文件夹,输入npm init -y,生成package.json文件 3. npm install -D webpack webpack-cli 4.新建三个文件夹src.out.config 5.在config文件夹下新建webpack.config.js文件 const path = require('path') module.exports={ entry:{ index:'./src/Cesium.js' }, output:{ filename:'[

使用loader打包静态文件－样式2

这篇我们了解下css-loader常用的配置项,要配置的话,use里面就不再是一个字符串了 // 打包模块不知道该怎么办,就去模块配置里面该怎么办 module: { // 规则 rules: [{ // 假设是以css结尾的,我需要一个load帮助我们去打包 test: /\.scss$/, // 需要两个loader,所以不能是个对象,需要是个数组 use: [ 'style-loader', 'css-loader', 'sass-loader', 'postcss-loader' ] }

webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc «(», expected punc «:»

webpack打包压缩 ES6 js..vue报错: ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected punc ?:? [js/test.js:1374,5] 解决方案: 配置babel,把配置放到文件[.babelrc]中 { "presets": ["es2015"] }

【JavaScript】 Webpack安装及文件打包

背景最近开启一个新项目,需要对前端的各类资源文件进行打包,经过多方调研后,决定使用webpack工具.但是网上的教程多是将webpack直接作为服务器使用,而我只是想将其作为单纯的资源打包工具而已.经过多方调研,终于发现如何实现webpack的文件打包功能. 准备在使用webpack之前,必须先要安装nodejs和npm. 安装完npm后,由于npm国内访问非常慢,可以设置为从淘宝的镜像下载各种资源包. npm config set registry http://registry.cnpm

webpack的多文件打包问题

1.第三方库如vue,vue-router可以利用webpack中的entry指定vendor:['vue','vue-router']来打包在一个文件中 2.将这些文件单独提取出来,在页面中使用<script></script>进行引入,commonChunkPlugin可以办到.利用commonChunkPlugin来配置多个<script></script> 引用时,可以如下配置: new webpack.optimize.CommonChunkPlu

webpack打包后bundle.js文件过大的问题

由于webpack将所有的文件合并到一个js文件.因此打包后的文件过大,导致网络请求不畅. 今天尝试了一下webpack打包.结果打出来3.6M.因为之前在本地测试的原因,一直用的webpack -w的命令. 即监控入口文件有无改动,若有改动,则自动编译. 更改命令:webpack -p -w webpack -p起到压缩的作用. 结果为1.4M. 查阅了一下相关资料.果断用nginx进行gzip压缩. 进入 /usr/local/etc/nginx目录下打开编辑nginx.conf 配置如下

webpack打包后访问不到json文件

一.问题描述在vue中,前端写ajax假数据,用axios将json数据渲染到组件中,开发期间一切正常,webpack打包压缩后,json文件的路径错误,页面访问不到数据,导致渲染失败. 二.预期结果能正常获取数据,渲染页面. 三.问题分析因为webpack没有把json文件打包到dist目录,所以not found,即便加了json-loader也无用. 四.解决方案手动把ajax数据目录拷贝到dist目录,先让页面完整出来.通常ajax数据是后端给前端一个接口地址,前端去访问的,所以

1、webpack加载配置打包.vue文件笔记

一.创建一个初始化一个npm项目,然后一直回车选择默认在终端输入npm init 回车选择默认值,会出现一个package.json文件然后就可以安装需要的包二.安装需要的包由于是一个小dome,我们来简单配置一下vue 输入: npm i webpack vue vue-loader 然后会出现WARN npm WARN [email protected] requires a peer of [email protected]* but none is installed. You m

webpack打包经验——处理打包文件体积过大的问题

前言最近对一个比较老的公司项目做了一次优化,处理的主要是webpack打包文件体积过大的问题. 这里就写一下对于webpack打包优化的一些经验. 主要分为以下几个方面: 去掉开发环境下的配置 ExtractTextPlugin:提取样式到css文件 webpack-bundle-analyzer:webpack打包文件体积和依赖关系的可视化 CommonsChunkPlugin:提取通用模块文件提取manifest:让提取的公共js的hash值不要改变压缩js,css,图片 react-