-
本章节主要内容： 流程： 1.初始化，自动创建package.json npm init 2、在本项目中安装Webpack作为依赖包 npm install webpack --save-dev 3、打包，打包js为自定义的hello.js(js文件自定义，2-3步骤之间需要自己写页面逻辑)，自动会生成一个hello.bundle.js文件 webpack hello.js hello.bundle.js 4、html页面引入hello.bundle.js 中间要点： 1、其他js文件处理 hell.js里require("./xx.js") 2、css文件处理 a、需要先命令行安装css的loader npm install css-loader style-loader --save-dev b、在hello.js里require("style-loader!css-loader!./style.css") 3、避免在require css大量指定loader，直接通过命令行来指定相应的loader webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" 4、避免每次输入打包等命令行，直接通过命名行来监听变动并自动打包 webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch 备注：webpack hello.js hello.bundle.js --watch 此命令没指定css loader，需require的时候指定 其他命令行 1、查看打包的模块 webpack hello.js hello.bundle.js --display-moudles //查看打包的模块 2、查看打包的进度 webpack hello.js hello.bundle.js --progress 3、命令行里终止该次命令 ctrl+c查看全部
-
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders. You need to specify 'babel-loader' instead of 'babel', see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed 这个报错已经提示你了，不能少了'-loader'后缀哦。查看全部
-
2233查看全部
-
<% for(var k in htmlWebpackPlugin.files.chunks){%> <% if (k != 'main') {%> <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks[k].entry%>"> </script> <% } %> <% } %> 不能写成k !== 'main' 不然会报错 （windows）查看全部
-
var path= require('path') module.exports ={ entry:'./src/script/main.js', output:{ path:path.resolve(__dirname,'./dist/js/'), filename:'bundle.js' } }查看全部
-
mkdir webpack-demo cd webpack-demo cnpm init -y查看全部
-
配置webpack.config.js文件时，路径设置参考webpack官方文档API，较新的版本当中，输出无需单独写path，可一并写入filename。 --config 可以直接指定配置文件查看全部
-
三种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'查看全部
-
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'] });查看全部
-
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'] }) ] };查看全部
-
将js插入html，减少http请求查看全部
-
var path = require("path") module.exports = { entry:'./src/script/main.js',//人口文件 output:{ path:path.resolve(__dirname,"dist/js"),//打包后的文件路径 filename:'bundle.js'//打包文件名称 } }查看全部
举报
0/150
提交
取消