前端工程化webpack4.x的基本配置打包基本资源、ES6转换、热更新

Webpack是web前端当前最流行的造化构建工具．可以将前端的各种资源自动打包构建,详细说明可见官网https://doc.webpack-china.org/

此篇文章针对前端工程化过程中，所需的webpack配置做一些基本的介绍，并给出自己的一套配置,可自动化打包html、css、sass、js(支持ES6)、images，并实现热更新

一．基本安装

1.      安装node.js

        官网下载地址：https://nodejs.org/en/。下载完成后傻瓜式安装。

2.      项目根目录新建package.json文件,将附2的内容复制进去.(假设你的程序放在D:/project里,那么项目根目录就是D:/project)

3.      项目根目录下若无webpack.config.js文件，新建一个空的同名文件，放在根目录中。将附1的内容复制进去

4.      项目根目录下新建.babelrc,将附3的内容复制进去.

5.      进入命令行，windows下同时按下windows+R,输入cmd，回车

        进入项目目录(下面说的本地，即是进入到项目目录),比如进入D:/project下，

        命令行输入 D: 回车

        命令行输入cd project 回车

6.      命令行全局安装webpack:命令行输入,回车

        npm i webpack -g

7.      本地安装node-sass,这个包无法实现npm安装，安装方式如下：

    (1)去node-sass的github主页下载：https://github.com/sass/node-sass/releases

    选择自己的操作系统的node后缀的版本,比如说，是windows32位操作系统，就下载

    win32-ia32-57.node,将文件放至项目根目录

    (2)命令行执行

    npm i node-sass--save-dev --sass_binary_path=./win32-ia32-57.node,

    这次安装完成后，以后就可以npm  i -–save-dev node-sass方式安装了

8.当前目录，命令行执行 npm i

二. 如何运行,实时更新

    命令行进入当前目录,执行 npm start,等命令执行结束,根据提示在浏览器中打开相应地址.即可在浏览器中看到相应的页面,此时在代码中更改html或css或js,保存后,可直接在浏览器中看到结果

三. 如何打包,线上发布

   命令行进入当前目录,执行npm runbuild ,即在当前目录下生成dist目录.里面的文件即可发布  

四.注意事项:

1.入口js为src/js/index.js

2.在原始的html文件中删除和标签

3.如何引入css文件?

   在 src/js/index.js里引入

    例:

    import ‘../css/ normalize.css’

     import ‘../css/default.css’

    引入顺序影响最终css在html中引入的顺序

4.如何在入口js中引入其它js文件?

    这里推荐ES6的import 和export详情可以查阅:

    http://es6.ruanyifeng.com/#docs/module

五.最终实现的效果:

    原始目录为 src,下面包括了大量的css和js文件

    打包后为dist目录,下面包含了打包后的一个css,和一个js文件

附1:webpack.config.js内容:

const path =require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractCSS = new ExtractTextPlugin('css/[name]-css.css');
const extractSASS = new ExtractTextPlugin('css/[name]-sass.css');
//构建前删除dist目录
const CleanWebpackPlugin = require('clean-webpack-plugin');


module.exports={
    entry:'./src/js/index.js',//入口JS
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'./dist')
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use: extractCSS.extract({                     
                      use: "css-loader",
                      fallback: "style-loader"
                })


            },
            {
                test:/.scss$/,
                use: extractSASS.extract({
                    use: [
                        {loader: "css-loader"}, 
                        {loader: "sass-loader"}
                    ],
                    fallback: "style-loader"
                })
            },
            {
                test: /.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options:{
                        cacheDirectory:true//缓存
                    }
                }
            },
            { //打包css里的图片
               test: /.(png|jpg|gif|jpeg)$/,
               use: [
                 {
                   loader: 'url-loader',
                   options: {
                     limit: 8192,  //小于8KB,就base64编码
                     name:'img/[name].[ext]',     //在哪里生成
                     publicPath:'../'    //在生成的文件引用,前面加
                   }
                 }
               ]
             }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin(
        {          
            template: './src/index.html',// 模板文件          
            filename: 'index.html'
        }
        ),
        new CopyWebpackPlugin([
            {from:'./src/img',to:'./img'}
        ]),
        extractCSS,
        extractSASS,
        new CleanWebpackPlugin(['dist','build'],{
            verbose:false,
            exclude:['img']//不删除img静态资源
        })
    ]


}

附2: package.json内容

{
 "name": "webpack-test",
 "version": "1.0.0",
 "description": "null",
 "keywords": [],
 "author": "py",
 "scripts": {
  "dev": "webpack-dev-server --mode development",
  "start": "npm run dev",
  "build": "webpack --mode production"
 },
 "devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.1",
  "clean-webpack-plugin": "^0.1.17",
  "copy-webpack-plugin": "^4.5.1",
  "css-loader": "^0.28.8",
  "extract-text-webpack-plugin": "^4.0.0-beta.0",
  "file-loader": "^1.1.11",
  "html-webpack-plugin": "^3.0.6",
  "node-sass": "^4.8.3",
  "sass-loader": "^6.0.6",
  "style-loader": "^0.20.3",
  "url-loader": "^1.0.1",
  "webpack": "^4.2.0",
  "webpack-cli": "^2.0.12",
  "webpack-dev-server": "^3.1.1"
 },
 "dependencies": {}
}

附3:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "not ie <= 8"]
      }
    }]
  ]
}

 --ByPY