构建webpack环境

Posted 2020-10-07

第一步：

　　全局安装webpack

　　　　npm install webpack -g

第二步：

　　创建项目，并自动生成package.json文件

　　　　npm init

第三步：

　　安装需要的插件

　　　　npm install webpack webpack-dev-server babel-core babel-loader copy-webpack-plugin css-loader style-loader vue-loader vue-style-loader vue-template-compiler --save-dev

　　　　webpack (本地webpack)

　　　　webpack-dev-server (wabpack搭建本地服务)

　　　　babel-core (Babel核心模块，Babel主要用于js超集的编译如, ES6， ES7， TS)

　　　　babel-loader (js的loader)

　　　　copy-webpack-plugin (拷贝文件插件)

　　　　css-loader style-loader (样式解析)

　　　　vue-loader (vue的loader)

　　　　vue-style-loader (vue文件的样式loader)

　　　　vue-template-compiler (vue文件组件的loader)

第四步：

　　用配置文件来打包，并开启服务

　　　　创建webpack.config.js文件

const webpack = require(‘webpack‘);
const CopyWebpackPlugin = require(‘copy-webpack-plugin‘);

module.exports = {
    entry: __dirname + ‘/app/main.js‘,        //唯一文件入口
    output: {
        path: __dirname + ‘/public/‘,        //打包后文件路径
        filename: ‘myAll.js‘                //打包后文件名
    },
    module: {
      loaders: [                            //rules和loaders都可以
          {
          test: /\.js$/,                    //用于解析ES6
          loader: ‘babel-loader‘,
          exclude: /node_modules/,
        },
        {
          test: /\.vue$/,                    //用于解析.vue文件
          loader: ‘vue-loader‘,
        },
        {
          test: /\.css$/,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader",
          }),
        }
      ]
    },
    devServer: {
        contentBase: ‘./public‘,            //服务开启后加载的文件目录
        port: 8081,                            //本地服务监听端口
        historyApiFallback: true,            //页面不跳转
        inline: true                          //实时刷新页面
    },
    plugins: [
        //内置插件
        new webpack.BannerPlugin(‘版权所有，翻版必究‘),        //为文件添加标识
        new webpack.optimize.OccurrenceOrderPlugin(),        //为组件分配ID
        new webpack.optimize.UglifyJsPlugin(),                //压缩js文件

        //外部插件
        new CopyWebpackPlugin([                                //用于文件复制
            { from: ‘src/mock/api.json‘, to: ‘mock‘ },
            { context: ‘src/images‘, from: ‘*‘, to: path.join(__dirname, ‘dist‘, ‘images‘) }
          ]),
    ]
};

第五步：

　　开启本地服务的配置

//package.json
"scripts": {
  "server": "webpack-dev-server --open --progress"  
}

　　　　命令npm run server 开启