1. Webpack基础介绍
   Webpack可以看做是模块打包机：
   它做的事情是，分析你的项目结构，找到JavaScript模块(commonJs)以及其它的
   一些浏览器不能直接运行的拓展语言（Scss，jsx,.vue等），并将其打包为合适的格式以供浏
   览器使用
   新建文件
   1.初始化项目

cnpm init -y

2.安装webpack

cnpm install webpack webpack-cli -D

3.在新建的文件夹下面新建一个src文件夹

4.在新建的文件下面创建一个webpack.config.js文件，在该文件里面进行webpack的配置

 webpack.config.js
2
3 entry: {
4 index:__dirname + "/src/index.js",
5 index2:__dirname + "/src/index2.js"
6 },//可以多个入口
7 output: {
8 path: __dirname + "/dist", //打包后的文件存放的地方
9 filename: "[name].bundle.js",//打包后输出文件的文件名
10 publicPath:"/dist/" //webpack output is served from
11 }

webpack的基本配置项讲解

1 (1)npm install webpack webpack‐cli ‐‐save‐dev
2 (2)package.json
3 开发环境与生产环境
4 webpack ‐‐mode development(开发环境中) ‐‐watch
5 webpack ‐‐mode production (生产环境)
6 (3) 默认入口src/index.js 出口 dist/main.js

webpack-dev-server

npm install ‐‐save‐dev webpack‐dev‐server
2
3 devServer: {
4 contentBase: "./", //content not from webpack is serverd
5 port: '8088',
6 inline: true//实时刷新
7 },
9 webpack‐dev‐server ‐‐mode development
10
11 (并不会生成dist 文件)

. source-map 映射源代码， 方便调试
devtool: ‘source‐map’ 添加属性

loaders配置 （webpack需要安装大量解析自动化包来做项目的初始化配置，loader包邮很多，在这里只介绍最常用的）
(1) vue-loader ( vue-loader vue-template-compiler )

(2) babel-loader ( ES6 => ES5 ,react) (babel-loader@7 babel-core
babel-presetes2015)
(3) css-loader,style-loader (将css 文件当成模块处理)
(4) sass-loader(scss 编译生成css文件) (安装node-sass)
(5) file-loader , url-loader (文件 copy 到目标文件夹)
(url-loader可以设置图片大小限制，当图片超过限制时，其表现行为等同于
file-loader，
而当图片不超过限制时，则会将图片以base64的形式打包进css文件，以减少
请求次
数。)
(6) post-css (处理css兼容) (postcss-loader autoprefixer postcss)

webpack.config.js 配置文件参考`

module.exports ={
3 entry: {
4 index:__dirname + "/src/index.js"
5 },
6 output: {
7 path: __dirname + "/dist", //打包后的文件存放的地方
8 filename: "[name].bundle.js",//打包后输出文件的文件名
9 publicPath:"/dist/" //webpack output is served from
10 },
11
12 devServer: {
13 contentBase: "./", //content not from webpack is serverd
14 port: '8080',
15 inline: true//实时刷新
16 },
17
18 devtool: 'source‐map',
19
20 module:{
21 rules:[
22 {
23 test: /.css$/,
24 loader: 'style‐loader!css‐loader'//添加对样式表的处理,内联样式
25 //loader: 'style‐loader!css‐loader!postcss‐loader'
26 },
27 {
28 test:/.js$/, //随便起的test 名字
29 exclude: /node_modules/, //排除一个
30 // exclude: /(node_modules|src)/, //*****排除多个怎么写？？？
31 loader:'babel‐loader',
32 query:{
33 presets:['es2015']
34 }
35 },
36
37 //npm install ‐‐save‐dev sass‐loader
38 //因为sass‐loader依赖于node‐sass，所以还要安装node‐sass
39 // npm install ‐‐save‐dev node‐sass
40 {
41 test: /.scss$/,
42 loader:'style‐loader!css‐loader!sass‐loader'
43 //loader:'style‐loader!css‐loader!postcss‐loader!sass‐loader'
44 },
45 {
46 test: /.(png|jpg|gif|svg)$/,
47 loader: 'file‐loader',
48 options: {
49 name: 'img/[name].[ext]'
50 }
51 //(1)将代码中依赖的图片资源复制到目标文件夹img/文件夹下面
52 //(2)自动更新静态url地址(根据publicPath)。
53 }
54 ]
55 }
56 }

1 //postcss.config.js 配置文件
2 module.exports = {
3 plugins: [
4 // require('autoprefixer')('last 100 versions' )
5 require('autoprefixer')(
6 { browsers:
7 [
8 'last 10 Chrome versions',
9 'last 5 Firefox versions',
10 'Safari >= 6',
11 'ie> 8',
12 'iOS >= 8',
13 'Android >= 4.4'
14 ]
15 }
16 )
17 ]
18 }