-
Version:webpack 3.10.0 自动生成html页面上 1 自动引入.js文件，安装html-webpack-plugin插件 npm install html-webpack-plugin --save-dev 2 配置文件 webpack.config.js var htmlWebpackPlugin = require('html-webpack-plugin');//引用插件 module.exports = {plugins:[ new htmlWebpackPlugin()// 初始化插件 ]} 3 目前dist/js目录下生成的.html文件与我们项目创建的index.html毫无关联，为了自动生成项目创建的index.html，设置plugins plugins: [ new htmlWebpackPlugin({ filename:'index-[hash].html',//指定文件名字 template: 'index.html',//指定dist/js下生成项目创建的index.html inject:'head'//指定.js文件打包后放置的位置 }) 4 指定.html文件在dist目录下，.js文件在dist/js目录下 output:{ path:__dirname+'/dist', filename:'js/[name]-[chunkhash].js' }查看全部
-
Version:webpack 3.10.0 主要内容 entry的使用方法： 1 字符串 entry:__dirname+'/src/script/main.js' 对应output:{path:__dirname+'/dist/js',filename:'bundle.js'} 2 数组 entry:[__dirname+'/src/script/main.js',__dirname+'/src/script/a.js'] 对应output:{path:__dirname+'/dist/js',filename:'bundle.js'} 3 对象 entry:{ main:__dirname+'/src/script/main.js', a:__dirname+'/src/script/a.js' } 对应output:{path:__dirname+'/dist/js',filename:'[name]-[hash].js'} or output:{path:__dirname+'/dist/js',filename:'[name]-[chunkhash].js'} output使用方法 filename中不需要指定文件的绝对路径，path中会确定文件的真实路径 多输入时filename的设置 entry中输入多个chunk时 为确保文件名唯一避免相互覆盖使用占位符命名filename 三种占位符 1 [name]是chunk的name 2 [hash]是本次打包的hash值，hash值相同 3 [chunkhash]是每个chunk的hash值，不相同保证文件的唯一性，只有改变文件中的内容时hash才变化未做改变的文件hash值不变查看全部
-
到当前章节的最新版本modules写法： 记得先安装npm install postcss-import module:{ rules:[ { test:/\.js$/, exclude:__dirname+'./node_modules/', include:__dirname+'./src/', // exclude:path.resolve(__dirname,'node_modules'), // include:path.resolve(__dirname,'src'), loader:'babel-loader' },{ test:/\.css$/, use:[ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: (loader) => [ require('postcss-import')({ root: loader.resourcePath }), require('autoprefixer')({ browsers:['last 5 version'] }), ] } } ] } ] }查看全部
-
我安装了下，最新版本提示我们并建议用 npm install babel-preset-env --save-dev 进行安装。（老师写的是npm install --save-dev babel-preset-latest） 在该项目根目录下新建 .babelrc 文件，写入 { "presets": ["env"] } 或者就按老师写的。但注意latest换成env 其他写成： exclude:__dirname+'./node_modules/', include:__dirname+'./src/', loader:'babel-loader' 注意：根目录下index.html文件里删除不必要的东西（注释也别用！），用npm run webpack打包后的dist目录下的index.html文件会受到影响 我改善之后打包运行所需时间只需434ms，再次运行后为369ms..，下一章节按照老师写的path.resolve路径所需时间为878ms...查看全部
-
三种方式： 1.在项目根目录下创建webpack.config.js module.exports = { entry: './src/script/main.js', output: { path: __dirname + '/dist/js', filename: 'bundle.js' } } 然后直接webpack就可以了 2.创建webpack.dev.config.js(自己命名) 然后要用webpack —config webpack.dev.config.js 3.创建webpack.config.js（自己命名） 在package.json的script加："webpack": "webpack --config webpack.config.js --progress —display-modules —colors” 然后npm run webpack查看全部
-
一、babel 1、babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码 2、安装babel 终端目标文件夹输入：npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常运行，视频中的loader:'babel'不能正常运行。 4、babel的loader是一个非常耗时的转换。 改善之前的时间是8260ms 二、query: ['kwɪərɪ]查询 presets:[priː'sets] 三、安装plugin的latest 终端目标文件输入：npm install --save-dev babel-preset-latest 四、改善： （1）webpack 的api的configuration loaders的参数5个：test,exclude,include,loader,loaders （2）改善方法：exclude,include参数 例如：exclude:'./node_modules/',//node_modules是已经引用过的，已经打包过的文件，其实这里对速度没有影响，这是告诉你如果是不相关的文件，可以用exclude include:'./src/', 1）会报错：-configuration.module.loaders[0].exclude: The provided value "./node_modules/" is not an absolute path! 2）报错的解决方法： exclude:__dirname+'/node_modules/',//已经引用过的，已经打包过的文件 include:__dirname+'/src/', （3）这样初步改善后时间是1210ms 五、给loader指定参数presets 1、直接Loader后跟问号 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟问号 3、配置文件中用query 4、项目根目录建立babelrc配置文件，配置文件中一个对象，对象中参数为presets. 5、config.js中指定babel，babel指定presets.查看全部
-
--modle-bind(编译时绑定模块)查看全部
-
Version: webpack 3.10.0 本章节主要内容： webpack 安装 （1）进入指定目录 （2）新建文件夹：终端输入：mkdir webpack-demo （3）进入文件夹：终端输入：cd webpack-demo （4）文件夹下初始化npm：终端输入：npm init （5）全局装webpack:终端输入：npm install webpack -g （注：第一次运行webpack项目时，如果没有这一步，而直接执行下一步的话，会提示错误：webpack: command not found） （6）文件夹中装webpack:终端输入：npm install webpack --save-dev (参数-g的含义是代表安装到全局环境里面，参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中。) (7)webpack-demo文件夹下新建文件夹:mkdir src 和 mkdir dist 项目操作: (1)webpack.config.js module.exports = { entry:__dirname+'/src/script/main.js', output:{ path:__dirname+'/dist/js', filename:'bundle.js' } } ps: entry:__dirname+'/src/script/main.js' 表示打包的入口 从路径src/script/main.js开始打包; output:表示打包后的文件放置的路径 (2)package.json中添加内容 "webpack":"webpack --config webpack.config.js --module-bind 'css=style-loader!css-loader' --display-reasons --display-modules --progress --watch" ps: --progress打包过程 --display-module 打包模块 --colors显示颜色 --display-reason 打包原因查看全部
-
output:{ path:__dirname+'/dist/js', filename:'bundle.js' }查看全部
-
npm i less-loader ---save-dev查看全部
-
（接上面的3） //插件 plugins: [ new htmlWebpackPlugin({ //html打包 //filename:'index-[hash].html', //文件带哈希 template:'index.html', //打包的html模版路径和文件名称 inject:'head', //js存放位置，head或body标签内 hash:true, //避免JS缓存 title:'wabpack使用方法', //传参,页面上通过<%= htmlWebpackPlugin.options.title %>方式接收 date:new Date(), //传参 minify:{ //压缩html页面 //removeAttributeQuotes:true, //去掉html中属性的双引号 removeComments:true, //删除html中的注释 collapseWhitespace:true //去掉空格 }, }), new htmlWebpackPlugin({ //添加多个页面打包 filename:'a.html', template:'index.html', inject:'body', title:'this is a.html', chunks:['main','a'], //指定不同页面引入不同的JS文件 //excludeChunks:['main'] //排除不需要引入的js }) ] };查看全部
-
（接上面的2） { //jquery文件打包 test:require.resolve('jquery'), use:[{ loader:'expose-loader',options:'jQuery' },{ loader:'expose-loader',options:'$' }] }, { //将ES6转换为ES5 test:/\.js$/,loader:'babel-loader', options:{ //也可以在package.json文件中配置'babel':{"presets":["latest"]} presets:['env'] }, exclude: path.resolve(__dirname, 'node_modules'), //排除本目录下的文件，减少打包时间 include: path.resolve(__dirname, 'src'), //指定src目录下的文件 } ] },查看全部
-
前几节课所有汇总，webpack3.0最新版本中测试正常，请大家少走弯路； const path = require('path');//引入path模块 const htmlWebpackPlugin = require('html-webpack-plugin'); //html打包模块 module.exports = { //入口文件路径，可以是多个文件 entry: { main:'./src/main.js', a:'./src/a.js' }, //出口文件 output: { path: path.resolve(__dirname, 'dist'), //输出路径 //publicPath:'http://www.163.com/', //线上绝对地址 filename: 'js/[name].bundle.js' //输出文件名js目录下,[name]表示匹配原始文件名 //filename:'[name]-[chunkhash].js' //生成原文件名带哈希 }, module:{ //功能模块 rules:[ //{test:/\.css$/,loader:'style-loader!css-loader'}, //css打包,不添加其它参数可用 {test:/\.css$/,use: ['style-loader','css-loader', {loader:'postcss-loader',options:{ plugins:[ //安装postcss-import插件，对@import引入的css文件处理，没有可不安装不添加 require('postcss-import'), require('autoprefixer') //自动处理class加前缀 ],browser:['last 5 versions']}} //对低浏览器版本兼容处理 ]},查看全部
-
在webpack3中可用: { test: /\.less$/, loader: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('autoprefixer')() ] } }, 'less-loader' ] }查看全部
-
如果运行报错了，将模板index.html里引用的js删掉就好了，只注释没用，要删掉才行。 一、如果想用不同的模版生成不同的html文件，只用在plugins里添加各种htmlWebpackPlugin的实例就好了。 二、页面中引入inline的script github上，ampedandwired/html-webpack-plugin/examples/inline/template.jade中可以看到代码。 三、htmlWebpackPlugin.files.chunks.entry就是chunks输出的地址 四、main以inline的形式引进，a,b,c以外链的形式引进 1、index.html中 （1）在htmlWebpackPlugin的配置中有一个有一个参数chunks可以配置。 （2）head中 <script type="text/javascript"> <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> </script> 重点：！！！compilation.assets是webpack暴露出来可以获取文件数据的方法。通过传文件名路径进这个对象，拿到这个文件的索引，通过调用source拿到文件内容。 compilation.assets需要的是不带publicPath，htmlWebpackPlugin.files.chunks.main.entry带publicPatch，所以用substr()截取。 （3）body中<%= htmlWebpackPlugin.files.chunks[k].entry %> （4）config.js中inject为false 五、小结 1、html和动态生成的文件一一对应。 2、htmlWebpackPlugin，如何自定义html，并且通过模板，参数如何传参。 3、多页面时，如何通过htmlWebpackPlugin生成多个html 4、深入探究通过htmlWebpackPlugin，结合模板的方式把生成的js，通过inline引入到html中。查看全部
举报
0/150
提交
取消