webpack的基本配置

全局：cnpm i webpack -g

局部：cnpm i webpack -D

1、在webpack中需要有出口与入口文件

　　指令：webpack  app.js  build.js 

　　注释：打包webpack文件，入口文件app.js，打包为build.js文件

2、进入文件每个项目都需要用到指令：npm init 

　　一路回车 + -y  代表yes

3、假设建立开发目录src文件夹

4、假设建立生产目录build文件夹

5、建立webpack配置文件config.js文件

　　const path = require('path')   由于webpack基于nide.js可以引入node模块

　　const config = {}  创建模块

　　module.exports = config  暴露模块

　　module.exports = (env)=>{    暴露模块（函数）　　可以运行指令webpack --env hello; 函数中可以接受env参数，打印env参数会在命令行显示hello

　　　　console.log(env)

　　　　return config

　　}

　　对象内配置任务：

　　　　入口 entry：‘路径’   一般是src下的app.js文件，入口文件可以是数组，可以引入多个入口文件，运行顺序从前到后； 此种方法可用于单页面应用

　　　　出口 output：{

　　　　　　　　path:path.join(__dirname,'build'),   出口打包文件    注释：path.join()方法可以合并路径，__dirname为相对路径，即build之前最大的路径

　　　　　　　　filename:'app.js' 　　打包的文件名字叫做app.js　　不确定名字时会打包成main.js文件

　　　　　　}

　　　　entry:{　　　　入口文件也可以设置为对象，打包不同的文件； 此种方法可用于多页面应用

　　　　　　app:'./src/app.js',
　　　　　　vendor:'./src/vendor.js'
　　　　},
　　　　output:{
　　　　　　path:path.join(__dirname,'build'),
　　　　　　filename:'[name]_[hash].js'　　　　名字为入口设置的名字；+hash值可以区别版本，只要改动文件内容，hash值必定不同
　　　　}

6、建立一个html文件，引入打包的文件可以测试运行

7、指令webpack --watch

　　　监听：当改动文件后立即更新

8、在package.json中的script中可以修改指令

　　例子："build":"webpack"    输入命令npm run build可以运行webpack

9、指令cnpm i html-webpack-plugin -D 开发用插件

　　const HtmlWebpackPlugin = require('html-webpack-plugin') 引入插件

　　用法：

　　　　plugins:[

　　　　　　new HtmlWebpackPlugin({

　　　　　　　　title:"乐蜂网"，　　　　网页的title名字

　　　　　　　　fliename:"123.html"　　文件的名字

　　　　　　})，

　　　　　　new HtmlWebpackPlugin({

　　　　　　　　title:"乐蜂网"，　　　　网页的title名字

　　　　　　　　fliename:"123.html"，　　生成文件的名字

　　　　　　　　template:'./src/index.jade'   以路径文件为模板创建文件；  注：此时title不起作用，因为它的优先级低于模板

　　　　　　})，

　　　　　　new webpack.optimize.UglifyJsPlugin({　　JS代码压缩配置

　　　　　　　　compress: {
　　　　　　　　　　warnings: false,
　　　　　　　　　　drop_console: false
　　　　　　　　}
　　　　　　})

　　　　]

　　使用此方法会自动生成配置html，可以在实例中添加title等参数，可以生成多个实例（多页面应用）

10、指令cnpm i jade-loader -D

　　需先下载cnpm i jade -D 才能使用

　　module:{

　　　　rules:[
　　　　　　{
　　　　　　　　test:/\.jade$/,　　　　测试jade
　　　　　　　　use:'jade-loader'　　使用jade-loader插件
　　　　　　}
　　　　]
　　},

11、webpack-dev-server

　　webpack相辅相成有一个server功能工具可以提供开发的热更新服务器

　　npm i webpack-dev-server -g   全局

　　npm i webpack-dev-server -D   局部

　　第一种启动方式：运行指令 webpack-dev-server

　　第二种启动方式：可以在config中配置devServer选项，在执行指令webpack就OK

　　　　devServer:{

　　　　　　port:1234,　　端口号
　　　　　　contentBase:'./build',　　文件位置
　　　　　　historyApiFallback: true,　　更新
　　　　　　open: true,　　　　自动打开
　　　　　　proxy:{　　　　　　配置跨域，服务器代理

　　　　　　}
　　　　}

12、指令cnpm i url-loader html-withimg-loader -D

　　在webpack中专门有一些东西编译文件、处理文件，这些东西就是loader，loader使用就是在配置项中，设置modules，在modules中设置rule值为数组，在rule中放入多个匹配规则

　　对html文件进行编译（显示图片）

　　{

　　　　test:/\.html$/,
　　　　use:'html-withimg-loader'
　　}

13、指令cnpm i file-loader -D   

　　配置图片打包：

　　　　{

　　　　　　test:/\.(png|jpe?g|svg|gif)$/,
　　　　　　use:[
　　　　　　　　{
　　　　　　　　　　loader:'url-loader',
　　　　　　　　　　options:{
　　　　　　　　　　　　limit:1000,　　　　　　　　　　　　　　文件大小；超出不能打包
　　　　　　　　　　　　name:'images/[hash:8].[name].[ext]'  　　文件名字
　　　　　　　　　　}
　　　　　　　　}
　　　　　　]
　　　　}

14、指令cnpm i css-loader style-loader -D

　　配置：

　　　　{　　　　　　　　

　　　　　　test:/\.css$/,

　　　　　　use:['style-loader','css-loader']　　先编译css-loader再编译style-loader

　　　　}

15、配置scss

　　cnpm i scss-loader -D

　　配置：

　　　　{　　　　　　　　

　　　　　　test:/\.scss$/,

　　　　　　use:['style-loader','css-loader','scss-loader']　　先编译scss-loader再编译css-loader再编译style-loader

　　　　}

16、指令cnpm i extract-text-webpack-plugin -D

　　将css、style、scss抽出来打包

　　引入  const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

　　module:{

　　　　[

　　　　　　{

　　　　　　　　test:/\.css$/,

　　　　　　　　use:ExtractTextWebpackPlugin.extract({

　　　　　　　　　　fallback:"style-loader",　　　用的最后一个loader

　　　　　　　　　　use:"css-loader"

　　　　　　　　})

　　　　　　}，

　　　　　　{

　　　　　　　　test:/\.scss$/,　　　　　　scss配置

　　　　　　　　use:ExtractTextWebpackPlugin.extract({

　　　　　　　　　　fallback:"style-loader",　　　用的最后一个loader

　　　　　　　　　　use:["css-loader","scss-loader"]

　　　　　　　　})

　　　　　　}

　　　　]

　　}

　　plugins:[

　　　　new ExtractTextWebpackPlugin({

　　　　　　fliename:'app.css',　　打包的文件名字（scss、css、style）

　　　　　　allChunks: true　　　　

　　　　})

　　]

17、指令cnpm i jsx-loader -D

　　jsx配置：

　　　　{

　　　　　　test:/\.(jsx|js)/,　　　编译jsx或js文件

　　　　　　exclude:/node_modules/,　　除了node_modules中的文件

　　　　　　use:'jsx-loader'

　　　　}

18、react配置

　　cnpm i react react-dom -S

19、ES6转ES5

　　cnpm i babel@6.23.0 -D

　　cnpm i babel-core@6.24.1 -D

　　cnpm i babel-loader@7.0.0 -D

　　cnpm i babel-preset-es2015@6.24.1 -D

　　cnpm i babel-preset-react@6.24.1 -D

　　前四个是ES6编译ES5；后一个是编译react的

　　配置文件：

　　　　{

　　　　　　test:/\.(jsx|js)/,　　　编译jsx或js文件

　　　　　　exclude:/node_modules/,　　除了node_modules中的文件

　　　　　　loader:'babel-loader',

　　　　　　query:{

　　　　　　　　presets:['es2015','react']

　　　　　　}

　　　　}