模块化和webpack

 模块化：AMD、CMD、commonJS、ES6等模块化

  export:导出

  import:导入

 

webpack：

   安装使用 ： npm install webpack@3.6.0 --save-dev

                         配置文件，设置打包出入口

                         npm init 初始化生成backpack. json文件并映射webpack命令

   （所有具体配置官网可查 webpack.js. org中点击loader）

   css配置：npm install style.loader --save-dev

                      npm install css.loader --save-dev

                     在配置文件中添加对应moudel

   less配置: npm install less.loader  --save-dev

                    在配置文件中添加对应moudel（需要依赖css配置）

   url配置: npm install file.loader --save -dev

                  npm install url.loader --save-dev

                  在配置文件中添加对应moudel（limit值以下的转化为base64编码）

  ES6配置: npm install -D babel-loader @babel/core @babel/preset-env webpack

                 在配置文件中添加对应moudel

  本地server配置： npm install webpack-dev-server@2.9.3 --save-dev(webpack3.6.0对应server2.9.3)

 　　　　　　　　 在配置为文件中添加devServer 服务器配置

  vue配置: npm install vue

                 解决版本为runtime不可用问题:

                 在配置文件中添加resolves{ Alisa{”$vue”: vue.e sm.js的路径}}

  插件：html-webpack-plugin(生成html)、uglifyjs-webpack-plugin(压缩代码)

  配置分离：npm install webpack-merge --save-dev

    　　 　　 分理成生产和发布、基础三个配置文件 

 

  配置文件信息：

const  path = require("path");
const  webpack = require("webpack");
const  HtmlWebpackPlugin = require("html-webpack-plugin");
const  UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

module.exports = {
    //入口
    entry: "./src/bbb.js",
    //出口
    output: {
        path: path.resolve(__dirname,"dist"),
        filename: "main.js",
/*        publicPath: "dist/"*/
    },
    //loader
    module: {
        rules: [
            //css
            {
                test: /\.css$/i,
                //使用多个loader,从右向左读取
                //style.loader:样式添加到dom
                //css.loader:加载scc文件
                use: ["style-loader", "css-loader"],
            },
            //less
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }
                ]},
            //img
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: 'img/[name].[ext]',
                        },
                    },
                ]},
            //ES6
            {
                test: /\.m?js$/,
                //排除
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        //预设
                        presets: ['@babel/preset-env']
                    }
                }
            },
            //vue
            {
              test:/\.vue$/,
              use:  ["vue-loader"]
            }
        ],
    },
    //当import vue时指定文件（指定版本）
    resolve:{
        alias:{
            "vue$": "vue/dist/vue.esm.js"
        }
    },
    //插件
    plugins:[
        //添加版权信息
        new webpack.BannerPlugin("最终版权归zhaopan所有"),
        //生成html插件
        new HtmlWebpackPlugin({
            template:"index.html"
        }),
        //压缩插件 会把版权注释等都删除
        /*new UglifyjsWebpackPlugin(),*/
    ],
    //本地服务器
    devServer:{
        contentBase: "./dist",
        inline: true,//热部署
       /* host: 1997*/
    }
}

 

 

  配置版本信息：