-
windows系统要先cd到.bin目录下然后再输入 ： C:\Users\wzd\node_modules\webpack-test\node_modules\.bin>webpack hello.js hello.bundle.js 否则会出现webpack不是内部命令的错误查看全部
-
这个地方直接运行webpack命令会报错，查阅官方文档后，output中的path写法如下 __dirname+"/dist/js"(__dirname这个应该是nodejs中的知识点);查看全部
-
--module-bind 绑定模块（loader模块style-loader css-loader） --watch 代码改变时自动重新打包 --display-modules 显示打包的模块 --display-reasons 显示打包该模块的原因 --progress 显示打包过程查看全部
-
安装插件：npm install html-webpack-plugin --save-dev 使用方法： 在webpack.config.js配置文件中 const htmlWebpackPlugin = require('html-webpack-plugin') module.exports = { plugins: [ new htmlWebpackPlugin({ filename: 'index-[hash].html', templata: 'index.html', // 以webpack.config.js文件的相对路径 inject: 'body', // 插入html中哪个位置 }); ] }查看全部
-
win系统下 有些地方要输入双引号，查看webpack帮助信息后面要加 -g查看全部
-
一、安装style-loader和css-loader 终端目标文件输入：npm i style-loader css-loader --save-dev 二、webpack可以将任何资源视为一个模块。 三、这里将css引用进来， 1、app.js:用的是es6的import语法 2、webpack.config.js: module的loaders 四、postcss-loader 对css进行浏览器兼容性考虑时，可以用到这个loader 1、安装postcss-loader 终端目标文件输入：npm install postcss-loader --save-dev 2、是一个后处理器。 3、可以加浏览器的前缀 （1）安装autoprefixer 终端目标文件输入：npm install autoprefixer --save-dev 4、loader处理方式是从右到左，即从数组的最后一项往前 5、webpack.config.js中， 视频中的配置现在的postcss已经不支持了，我的配置是 { test: /\.css$/, loaders: [ "style-loader", "css-loader?importLoaders=1", //这里是为了把css里的@import先执行第一个loader { loader: "postcss-loader”, options: { plugins: (loader)=>[ require('autoprefixer')({ broswers:['last 5 versions'] }) ] }, } ], }查看全部
-
node中的对象path. var path = require(‘path’); 一、（改善）进一步加快解析速度： 1、path.resolve(__dirname,'app/src') node有个api：path，path有个方法：resolve（解析）。 __dirname：在运行环境下的变量，在当前环境的路径， 'app/src':相对路径 解析完了之后可以得到一个绝对路径 2、改善方法： （1）改善的代码：exclude:path.resolve(__dirname,'/node_modules/'), include:path.resolve(__dirname,'/src/') （2）这样进一步改善后时间是618ms （3）注意，如果是'node_modules'（视频中），而不是'/node_modules/'的话，也能运行。但是'/node_modules/'要更快，'/node_modules/')是618ms,而'node_modules'（视频中）花的时间是1254ms查看全部
-
一、webpack里的配置loader的基本格式： module: { loaders: [ { test: /\.js/, // 这里test是正则匹配，匹配给哪些用 loader: ‘babel’, //这是loader的名字 exclude: ‘./node_modules/’, //这个配置的意思是排除哪些文件，这句话就是不对node_modules文件夹进行loader。 include: './src/‘,//这个配置的意思是指定打包的范围，这两个配置是提升打包速度的关键 query: { // query的意思是给loader加上参数 presets: [“latest”] //presets表示里面的参数名还有值 } } ] } 二、babel 1、babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码 2、安装babel，npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常运行，视频中的loader:'babel'不能正常运行。 三、安装plugin的latest npm install --save-dev babel-preset-latest 四、改善：exclude,include参数 例如：exclude:'./node_modules/',//node_modules是已经引用过的，已经打包过的文件，其实这里对速度没有影响，这是告诉你如果是不相关的文件，可以用exclude include:'./src/‘, 五、给loader指定参数presets 1、直接Loader后跟问号 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟问号 3、配置文件中用query 4、项目根目录建立babelrc配置文件，配置文件中一个对象，对象中参数为presets. 5、config.js中指定babel，babel指定presets.查看全部
-
老师的webpack版本是1.X，目前已经更新到2.X，使用2.x版本的朋友配置上稍微有点和老师说的不一样： 1： 在webpack.config.js里面，向loader传参不在使用query，而是使用options {test: '/\.js$/', loader: 'babel-loader', options: {'presets': ['env']}} （-loader不可以省略） 2： 另外如果是在.babelrc文件中配置的话，千万不要给.babelrc文件添加诸如js, json的后缀名，这个文件没有后缀，切记！切记！查看全部
-
webpack 学习笔记 可以打包 AMD、CMD、Common、css\、coffee、json、Image 等均可打包，也可以打包自定义后缀的文件，如：.vue、.jsx 等，都可以通过loaders加载器进行处理打包。 webpack的目标： 1.其他打包工具不具备的代码分割，切分依赖库，分开加载所需的依赖，使加载速度加快。 2.全面的loaders加载系统 3.插件系统，如模块热更新查看全部
-
webpack2以上配置output不同。注意。查看全部
-
安装非全局的webpack，使用要加：node_modules\.bin\webpack hello.js hello.bundle.js查看全部
-
一、（改善）进一步加快解析速度： 1、path.resolve(__dirname,'app/src') node有个api：path，path有个方法：resolve（解析）。 __dirname：在运行环境下的变量，在当前环境的路径， 'app/src':相对路径 解析完了之后可以得到一个绝对路径 2、改善方法： （1）改善的代码：exclude:path.resolve(__dirname,'/node_modules/'), include:path.resolve(__dirname,'/src/') （2）这样进一步改善后时间是618ms （3）注意，如果是'node_modules'（视频中），而不是'/node_modules/'的话，也能运行。但是'/node_modules/'要更快，'/node_modules/')是618ms,而'node_modules'（视频中）花的时间是1254ms查看全部
-
插件的其它参数： plugins:[ new htmlWebpackPlugin({ filename:'index-[hash].html', //文件名 template:'index.html',//传参，让两个html文件建立联系 inject:'head' ,//让生成的script标签放在head标签还是body标签中 title: 'i am back' //html中的title要取到这个值，需要写成：<title><%= htmlWebpackPlugin.options.title %></title> }) ] 插件参数与调用 <body> <!--查看htmlWebpackPlugin下所有参数--> <!--JSON.stringify：JSON方法，让数组或者对象都转化为字符串--> <% for(var key in htmlWebpackPlugin.files){ %> <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %> <% }%> <% for(var key in htmlWebpackPlugin.options){ %> <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %> <% }%> </body> 上线操作 1. 设置上线地址：在output中添加publicPath属性 output:{ publicPath:'http://cdn.com' } 2. 压缩当前生成的html文件：在plugins中添加minify属性 minify:{ removeComments:true,//去掉注释 collapseWhitespace:true,//去掉空格、空行 } npm插件查询官网：https://www.npmjs.com/查看全部
-
三 entry 有三种设置方式：字符串型单个路径，数组型路径，对象 1. 单个路径：entry:'./src/script/main.js', 2. 数组路径：在webpack.config.js文件中，将entry修改为：entry:['./src/script/main.js','./src/script/a.js'] 3. 对象：分为key和value，key表示 chunk name，value表示真实的entry，此时的entry可以是单个路径也可以是数组路径。主要应用于多页面场景 四 output 当entry采用对象设置时，为了使拥有不同chunk name的文件分别打包，需要设置output * 修改filename：filename:'[name]-[chunkhash].js' （注意：此时有三种占位符可以选择。[name]对应chunk name，[hash]本次打包的哈希值，[chunkhash]每一个chunk都对应一个哈希值，如果文件被修改，哈希值就随之变化，如果文件没有修改，哈希值就保持和上次打包的一样）查看全部
举报
0/150
提交
取消