webpack安装+插件（详细）

1.准备空白文件夹建立webpack，文件夹内部----按住shift+右键（打开命令行）
接下来开始一系列操作
2.命令行操作
①

npm init

回车*n(之命令行可以重新输入)
②安装webpack和webpack-cli

cnpm i --save webpack-cli webpack

③安装自动更新插件（此插件安装后，dist文件将会隐藏，启动后可localhost访问到）

cnpm i --save webpack-dev-server

并修改配置文件(安装后自动生成的)

④安装loader(因为webpack是解析js的打包工具，需要借助loader)
css

cnpm install --save style-loader css-loader

sass

cnpm install --save postcss-loader sass-loader

es5/6（转译）

cnpm i --save babel-loader@7 babel-core babel-core babel-preset-es2015

并修改配置文件
新建文件夹
webpack.config.js

module.exports = {
    entry: {
        myentry1: __dirname + '/src/index.js',
        myentry2: __dirname + '/src/index1.js',
    },
    output: {
        path: __dirname + '/dist', //文件
        publicPath: '/dist',
        filename: '[name].js'
    },
    devServer: {
        contentBase: './',
        port: '8080',
        inline: true,
    },
    module: {
        rules: [{
                test: /\.css$/,
                loader: 'style‐loader!css‐loader'
            }, {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!postcss-loader!sass-loader'
                    //loader:'style‐loader!css‐loader!postcss‐loader!sass‐loader'
            },
            {
                test: /\.js$/, //随便起的test 名字
                exclude: /node_modules/, //排除一个
                // exclude: /(node_modules|src)/, //*****排除多个怎么写？？？
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }
        ]
    }
}

⑤打包时自动兼容浏览器

cnpm i --save postcss-loader autoprefixer postcss

并修改配置文件
新建***postcss.config.js***

module.exports = {
    plugins: [
        // require('autoprefixer')('last 100 versions' )用这个或用下面长的那个
        require('autoprefixer')(
        	{ browsers: 
        		[
		        	'last 10 Chrome versions',
		         	'last 5 Firefox versions', 
		         	'Safari >= 6', 
		         	'ie> 8',
		         	'iOS >= 8',
		         	'Android >= 4.4'
         		] 
         	}
        )
    ]
}

⑥文件放置位置