WEBPACK4.X基本项目环境搭建

WEBPACK4.X基本项目环境搭建

一、webpack安装
1.若没安装过webpack，那么首先是全局安装

npm install webpack -g 
npm install webpack-cli -g

2.创建一个项目进行webpack的局部安装并生成一个package.json

npm init
npm install webpack -S 
npm install webpack-cli -S

3.打包：打包用的是webpack命令同时也可以分2种情况

webpack –mode production(生产环境) 
webpack –mode development(开发环境)

附加：我们可以在package.js下的scripts来简化命令
例如：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --mode development"
},

二、webpack4.x配置(webpack.config.js)
webpack有4个核心概念

入口(entry) --> 输出(output)--> loader-->插件(plugins)

1.多文件入口配置和出口配置

module.exports = {
  entry: {
  	index:'./src/index.js',
  	jbt_btn:'./src/jbtmodel/jbt_btn.js'
  },//入口
  output: {//出口
    filename: '[name].js',
    path: __dirname + '/dist/js'
  }
};

2.devserver安装和配置
首先是npm安装

npm install webpack-dev-server -D

然后在webpack.config.js中配置如下：

devServer: {
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  host:'localhost',//服务器地址
  port: 4000,
  inline:true//实时刷新
}

运行配置：

"start": "webpack-dev-server --open"
（webpack-dev-server --open --inline(这个也是可以的，做到实时刷新)）

3.loader配置（loader的作用就是：webpack支持js，不支持css和html，让webpack支持，则需要loader而palugins可以有效打包或压缩css，js，html，图片。）
a.引入css需要css-loader和style-loader，图片加载需要file-loader

npm install style-loader css-loader -D(S)
npm install file-loader -D

配置：

module: {
        rules: [
          { test: /\.css$/, use:['style-loader','css-loader'] },//正则，表示后缀为css的文件
          { test: /(\.jpg|\.png|\.jpeg|\.gif)$/, use:['file-loader']}//同理......
        ]
    }

三、插件
a.html-webpack-plugin，这是一个很重要的插件。

npm install html-webpack-plugin -D(S)

配置

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
//此处省略module.exports
plugins: [
    //new webpack.optimize.UglifyJsPlugin(),
    new htmlWebpackPlugin({
         template: './src/index.html',//源模板文件
         filename: 'a.html'//改html的输出文件名index.html改为了a.hmtl,
         chunks: ["common",'index']，//模块依赖，意思就是这个html依赖于common.js,index.js
         inject: true,
         minify:{
             removeAttributeQuotes:true,//去除引号
             removeComments:true,//去除注释
             removeEmptyAttributes:true,//去除空属性
             collapseWhitespace:true//去除空格
         }
     })
 ]

上述配置仅仅只是对单个页面进行了配置，若有很多页面，这样配置是不妥的，需要抽象函数
抽象如下：

let getHtmlConfig = (name)=>{
	return{
		template: `./src/${name}.html`,
        filename: `${name}.html`//改html的输出文件名index.html改为了a.hmtl,
        inject: true,
     	chunks: ["common",name],
        minify:{
            removeAttributeQuotes:true,//去除引号
            removeComments:true,//去除注释
            removeEmptyAttributes:true,//去除空属性
            collapseWhitespace:true//去除空格
	    }
	}
}

//
plugins: [
    //new htmlWebpackPlugin(getHtmlConfig('index')),
    new htmlWebpackPlugin(getHtmlConfig('jbt_btn'))
]

b.css提取分离插件

npm install extract-text-webpack-plugin@next -D(S)

配置

const ExtractTextPlugin=require("extract-text-webpack-plugin")
//然后在plugins里面引入
new ExtractTextPlugin('./css/[name].css')
//在对css-loader配置做出改动

{ test: /\.css$/, use:ExtractTextPlugin.extract({
    fallback:'style-loader',
     use:[{
       loader:'css-loader?name=./css/[name].[ext]',
       options:{
         minimize:false,//代码压缩
       }
     }],
     publicPath;"../"
 })}

四、配置babel
首先安装

npm install babel-core babel-loader babel-preset-env babel-preset-react -S

在根目录下建一个.babelrc文件
再在其文件中写人{“presets”:[‘env’,‘react’]}
在webpack.config.js下写入：
{
test:/.(jsx|js)$/,
use:{
loader:‘babel-loader’
},
exclude:/node_modules/ //排除不编译node_modules文件
}

这样一个基本的webpack环境就搭建出来了