webpack踩坑之路
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
webpack --progress --colors --watch
当然，我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
# 安装 cnpm install webpack-dev-server -g
# 运行 webpack-dev-server --progress --colors
webpack插件
我们需要在js文件里，通过require的方式来引入css，我们来看具体的方法，首先需要安装css-loader，
style-loader(安装style-loader的目的是为了在html中以style的方式嵌入css)。
npm install css-loader,style-loader --save-dev
然后在main.js中：
require('./app.css');
在webpack.config.js增加：
module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, module: { loaders:[ { test: /\.css$/, loader: 'style-loader!css-loader' }, ] } };
在html中引入：
<html> <head> <script type="text/javascript" src="bundle.js"></script> </head> <body> <div id="test">Hello World</div> </body> </html>
图片转换为base64编码、
一定要先安装html-loader并配置
{ test:/\.html$/, use:[ { loader:"html-loader" } ] }
安装url-loader
npm install url-loader --save-dev
配置config文件
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=40000'
}
注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片。
安装sass编译插件
/在项目下，运行下列命令行 npm install --save-dev sass-loader //因为sass-loader依赖于node-sass，所以还要安装node-sass npm install --save-dev node-sass
配置loader
module:{ //在配置文件里添加 JSON loader
loaders:[
{test:/\.css$/,loader:"style-loader!css-loader"},
{test:/\.scss$/,loader:"style-loader!css-loader!sass-loader"}
]
}
----------------------------------------------------------------------------------------------------- ---------------------------------------------慕课网教程笔记---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
创建一个webpack项目流程
npm init初始化npm安装
npm install webpack --save-dev 安装webpack
（
当你为你的模块安装一个依赖模块时，正常情况下你得先安装他们（在模块根目录下npm install module-name），然后连同版本号手动将他们添加到模块配置文件package.json中的依赖里（dependencies）。
-save和save-dev可以省掉你手动修改package.json文件的步骤。spm install module-name -save 自动把模块和版本号添加到dependencies部分spm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分
）
webpack hello.js hello.bundle.js webpack打包命令
npm install css-loader style-loader --save-dev 安装css模块
webpack hello hello.bundle.js --module-bind 'css=style-loader!css-loader' 模块绑定，自动添加前缀
webpack hello hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch 监听模式（文件更改，自动更新）
安装自动生成HTML插件
cnpm install html-webpack-plugin --save-dev
webconfig配置
首先要引用
var htmlWebpackPlugin=require('html-webpack-plugin'); //自动生成html插件
module.exports={
entry:{},
output:{},
plugins:[ //实例化插件
new htmlWebpackPlugin({
filename:'index.html',
template:"index.html",
inject:'body',//指定位置
title:'webpack is good',
date:new Date()
})
]
}
webpack使用自动生成css3前缀插件，以及css文件内import css文件
cnpm install style-loader css-loader --save-dev
cnpm i -D postcss-loader
cnpm install postcss-import --save-dev
loader配置
{ test:/\.css$/, use:[ 'style-loader', 'css-loader', { loader:'postcss-loader', options:{ plugins:(loader)=>[ require('postcss-import')({root:loader.resourcePath}), require('autoprefixer') ] } } ] }
@import url("./flex.css"); html,body{padding: 0;margin: 0;background-color: #00A3C0;} ul,li{list-style: none;padding: 0;margin: 0;}
cnpm i -D webpack-dev-server
webpack-dev-server --progress --colors 启动监听模式
安装html-webpack-template 可配置head头部信息(更多信息： https://github.com/jaketrent/html-webpack-template)
$ npm install html-webpack-template --save-dev
例子：
{ // ... plugins: [ new HtmlWebpackPlugin({ // Required inject: false, template: require('html-webpack-template'), // template: 'node_modules/html-webpack-template/index.ejs', // Optional appMountId: 'app', baseHref: 'http://example.com/awesome', devServer: 'http://localhost:3001', googleAnalytics: { trackingId: 'UA-XXXX-XX', pageViewOnLoad: true }, meta: [ { name: 'description', content: 'A better default template for html-webpack-plugin.' } ], mobile: true, lang: 'en-US', links: [ 'https://fonts.googleapis.com/css?family=Roboto', { href: '/apple-touch-icon.png', rel: 'apple-touch-icon', sizes: '180x180' }, { href: '/favicon-32x32.png', rel: 'icon', sizes: '32x32', type: 'image/png' } ], inlineManifestWebpackName: 'webpackManifest', scripts: [ 'http://example.com/somescript.js', { src: '/myModule.js', type: 'module' } ], title: 'My App', window: { env: { apiHost: 'http://myapi.com/api/v1' } } // And any other config options from html-webpack-plugin: // https://github.com/ampedandwired/html-webpack-plugin#configuration }) ] }
