-
css-loader使WEBPACK可以处理CSS文件，style-loader则是可以便HTML插入STYLE标签查看全部
-
安装好相应的模块包后还需要制定文件类型查看全部
-
webpack 入口文件 出口文件查看全部
-
webpack --config webpack.config.js --progress --display-modules --colors --display-reason查看全部
-
可以使用exclude或者include去指定打包范围，可以减小打包的速度查看全部
-
三种loader的加载方式 1、在require中使用 require("./loader!./dir/file.txt"); 2、在配置文件中用正则表达式 { module: { loaders: [ { test: /\.jade$/, loader: "jade" }, // => "jade" loader is used for ".jade" files { test: /\.css$/, loader: "style!css" }, // => "style" and "css" loader is used for ".css" files // Alternative syntax: { test: /\.css$/, loaders: ["style", "css"] }, ] } } 3、使用CLI方式（命令行界面） $ webpack --module-bind jade --module-bind 'css=style!css'查看全部
-
配置webpack.config.js文件时，路径设置参考webpack官方文档API，较新的版本当中，输出无需单独写path，可一并写入filename。 output：{filename：‘dist/bundle.js’} 打包时需要添加脚本，可在json中scripts下，插入想要的webpack脚本。 "webpack": "webpack --config webpack.config.js --display-modules --progress --color"查看全部
-
CSS文件需要安装 style-loader、css-loader两依赖，并在命令行中打包指令后，加入 --module-bind 将该类型绑定。 webpack input.x output.x --module-bind 'css=style-loading!css-loading' 编写代码过程中多次修改，每次修改结束后要预览效果，需要重新打包，过程会比较繁琐，因此在打包命令后，加入-watch以监听改变，自动更新。 --progress 可以看到文件打包的过程。 --display-modules 将罗列所有引用的模块及相应模块的处理方式查看全部
-
在可以通过inject的方式注入js文件的同时，是没有办法再加入内联js，如果不使用compilation.assets的话是会一直报错的，可以看看https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade里面插件作者的代码查看全部
-
41.webpack和npm run webpack的区别：前者是webpack默认的基本命令，后者是执行package.json里面的scripts标签。 42.html-loader可以处理webpack中的HTML模板 1.安装：npm install html-loader --save-dev 2.配置：{ test:/\.html$/, loader:'html-loader' } 3.app.js中引入并初始化： import './css/common.css'; import Layer from './components/layer/layer.js'; const App = function() { var dom = document.getElementById('app'); var layer = new Layer(); dom.innerHTML = layer.tpl; } new App(); 注意事项： 1.html-webpack-plugin 会和 html-loader冲突，如果引入html-loader 会导致<%=htmlWebpackPlugin.options.title %> 编译不出。 2.inject: 'body'不能写成head,那样获取不到app这个id,因为<div id='app'></div>是在body中。 3.编译后不会再 ./dist/index.html中显示，但在浏览器中可以显示。 43.webpack的tpl模板支持ejs语法， 1.ejs安装：cnpm install ejs-loader --save-dev 2.配置：{ test:/\.tpl$/, loader:'ejs-loader' } 3.写法： <h1>study hard! my name is <%=name%></h1> <%for(var i=0;i<arr.length;i++){%> <%=arr[i]%> <%}%> 4.传参：dom.innerHTML = layer.tpl({ name:'xiaohe', arr:['oppo','huawei','xiaomi'] });查看全部
-
webpack tag查看全部
-
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration has an unknown property 'postcss'. These properties are valid: object { amd?, bail?, cache?, context?, dependencies?, devServer?, devt For typos: please correct them. For loader options: webpack 2 no longer allows custom properties in configuration. Loaders should be updated to allow passing options via loader options in module.rules. Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader: plugins: [ new webpack.LoaderOptionsPlugin({ // test: /\.xxx$/, // may apply this only for some modules options: { postcss: ... } }) ] 原因：Webpack 2.1.0-beta23 之后的config里不能直接包含自定义配置项 解决办法：新建文件postcss.config.js，写入：module.exports = { plugins: [ require('autoprefixer')({ browsers: ['last 5 versions'] }) ] };查看全部
-
Windows下"css=style-loader!css-loader"必须用双引号，单引号报错查看全部
-
查看cli参数要输入webpack --help查看全部
-
webpack主要特点： 1.代码分割 2.按需加载3.整合第三方类库 模块热更新配置，提高开发效率 使用webpack进行打包步骤： 1.npm init 初始化文件 2.npm install webpack --save-dev 安装webpack 3.新键hello.js文件 4.webpack hello.js hello.bundle.js 打包压缩文件 成功之后信息介绍：asset：打包生成的文件 Chunks:打包的块 Chunk Name打包的块名称 5.查看全部
举报
0/150
提交
取消