初识webpack3

初识webpack3

安装webpack3。

基础命令

1. 打包js文件

webpack src/xxx.js dist/xxx.bundle.js

2. 监听文件变化

webpack src/xxx.js dist/xxx.bundle.js --watch

3. 压缩文件

webpack src/xxx dist/xxx.bundle.js -p

配置文件

webpack.config.js

1. 基础配置

module.exports = {
	entry: './src/app.js',
	output: {
	  filename: './dist/app.bundle.js'
	}
};

entry：源文件
output：输出的文件目标
在终端直接输入webpack会自动去寻找webpack.config.js的文件并读取

2. 插件 html-webpack-plugin

该插件将为你生成一个HTML5文件，其中包含webpack 使用script标记的正文中的所有包，只需将插件添加到webpack 配置中。

const HtmlWebpackPlugin = require('html-webpack-plugin')
	 
module.exports = {
	entry: 'app.js',
	output: {
		path: __dirname + '/dist',
	    filename: 'app.bundle.js'
	},
	plugins: [
	  new HtmlWebpackPlugin({
          title: 'webpack custom 666',
          template: './src/index.html'
      })
	]
}

title：生成html文件的title
template：html模板文件路径
常用的属性还有minify（压缩简化html文件），hash（为引入的css和js添加哈希标识）等。

3. 处理css文件css-loader

module.exports = {
	module: {
	  rules: [
	    {
	      test: /\.css$/,
	      use: ['style-loader', 'css-loader'],
	    },
	  ],
	},
};

css-loader：用来处理css样式，例如把css中类似@import()或者url()这样的引用资源进行引入或者处理。
style-loader：将所有处理好的css样式以行内元素style标签的格式动态注入到界面的head标签中去。
loader的解析顺序是从右往左，所以应该先加载css-loader，应该将css-loader放在最右边

scss文件加载与之相似，不过要增加scss的加载器。
若要将css文件打包成独立文件，则使用插件extract-text-webpack-plugin（此插件是适用webpack1,2,3）

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
	module: {
	  rules: [
	    {
	      test: /\.css$/,
	      use: ExtractTextPlugin.extract({
	        fallback: "style-loader",
	        use: "css-loader"
	      })
	    }
	  ]
	},
	plugins: [
	  new ExtractTextPlugin("styles.css"),
	]
}

4. 插件webpack-dev-server
在文件改变时实时加载（安装时注意版本兼容）
“webpack”: “^3.8.1”,
“webpack-dev-server”: “^2.9.7”
亲测兼容

"scripts": {
	"start:dev": "webpack-dev-server"
}

修改webpack-dev-server的配置devServer

var path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};

scripts配置，浏览器自动运行脚本

"scripts": {
	"start": "webpack-dev-server --open",
},

5.加载图片文件file-loader和url-loader

file-loader：将项目中使用的图片当做文件进行打包，最终生成引用路径。
url-loader：用法与file-loader一致，只是新增了 limit 限制，将小于 limit 限制的图片转化为base64在项目中使用，当大于 limit 限制时跟file-loader一样当做文件打包并使用路径引用。

*注：文件引用配置中都会关系到 outputPath 和 publicPath 详细关系

publicPath ：用来指定打包生成后的css或者url引用中路径的配置，也就是说pulicPath针对的是路径，并不是文件本身。
outputPath：用来配置打包生成的文件输出的位置，它针对的是文件存储的位置，和代码中的路径引用无关。

https://www.imooc.com/article/21835
此篇文章将两者关系介绍的很清楚。