入坑 webpack4.0+ 文件打包

  博主最近入坑 webpack 进行前端文件的打包，由于前端技术的更新迭代，博主也是遇到了不少坑。接下来这篇博客是对 webpack 的一些基本的介绍。 

---

版本	打包命令
3.0 ~ 4.0	webpack 打包文件 输出文件
4.0+	webpack 打包文件 -o 输出文件

下面是一个 在项目根目录下的 webpack.config.js 文件的打包配置的基本写法：

webpack.config.js

var htmlwp = require('html-webpack-plugin');
// 热刷新配置

module.exports={
    entry: "./src/main.js", // 指定打包的入口文件
    output: {
        path: __dirname+"/dist",	// 注意 webpack 1.14.0 要求路径为绝对路径
        filename: "build.js"
    },
    module:{
        rules:[
                {
                    test: /\.scss$/,	// 打包 .scss 文件
                    // 先用css-loader解析css文件，变为style文件后再用style-loader解析成指令
                    use:[ 'style-loader','css-loader','sass-loader' ]
                },
                {
                    test: /\.css$/,
                    // 先用css-loader解析css文件，变为style文件后再用style-loader解析成指令
                    use:[ 'style-loader','css-loader' ]
                },
                {
                    test: /\.less$/,	// 打包 .less 文件
                    // 先用css-loader解析css文件，变为style文件后再用style-loader解析成指令
                    use:[ 'style-loader','css-loader','less-loader' ]
                },
                {
                    test: /\.(png|jpg|gif|ttf)$/,	// 打包 url资源 文件
                    // 先用css-loader解析css文件，变为style文件后再用style-loader解析成指令
                    use:[ 'url-loader?limit=40000' ]	
                    // limit 表示限制图片大小为40k为临界值
                    // 小于40k的图片均被打包到build.js中去
                },
                {
                    test: /\.js$/,	// 将 js 文件中的es6语法转成es5语法
                    loader: 'babel-loader',
                    exclude: /node_modules/,	//将 node_modules 文件夹的转换排除
                    query:{
                        presets: [ 'es2015' ],	// 配置将es6语法转换成es5语法的指令
                        plugins: [ 'transform-runtime' ]	// 动态编译 vue 文件
                    }
                },
                {
                    test: /\.vue$/,	// 解析 .vue 组件页面文件
                    use: [ 'vue-loader' ]
                },
             ]
    },
    plugins: [
        new htmlwp({
            title: '首页',	// 生成的页面标题 
            filename: 'index.html',	// webpack-dev-server 在内存中生成的文件名称
            template: 'index1.html'	// 根据index1.html这个模板来生成，需要自己定义
            })
    ]
}

---

其次是博主使用 vue 开发，其中会用到的一些插件，插件与插件之间的版本要互相匹配，不然会有错误冲突，这是一个坑，下面博主提供自己写demo时会用到的版本配置

package.json

{
  "name": "learn",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008",
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1",
    "url-loader": "^1.0.1",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  },
  "description": "",
  "dependencies": {
    "mint-ui": "^2.2.13",
    "moment": "^2.22.2",
    "vue": "^2.5.17",
    "vue-lazyload": "^1.2.6",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.1"
  }
}

拿到这个文件后，可以直接在该文件目录下打开命令行输入

webpack

即可下载并安装对应 ng_modules 对应的配置