webpack构建笔记

记得去年我自己看教程搭了webpack3.0的配置，当时虽然搭完了，但是也不是完全理解，现在纯复习一遍
配置webpack之前需要下载各种依赖loading及plugins,下面是我记录下来的安装步骤：

npm init //初始化
npm i webpack@3.10.0 vue vue-laoder@13.6.0 //安装webpack及vue依赖
npm i css-loader vue-template-compiler //安装css依赖及vue 模块依赖
npm i style-loader url-loader file-loader //css-loader内部样式注入到我们的HTML页面  file-loader规定图片资源存放的路径
npm i webpack-dev-server@2.9.7   //web 服务器  热加载
npm i cross-env //环境变量
npm i html-webpack-plugin //生成html模板
npm i postcss-loader autoprefixer babel-loader babel-core //postcss-loader处理css代码 babel-loader转es5语法 
npm i vue-router --save-dev //安装路由

扩展
npm i clean-webpack-plugin --save-dev  清理旧文件

//有同学 npm run dev的时候 提示 'cross-env' 不是内部或外部命令，也不是可运行的程序 这个 error的时候 在命令行里输入npm install cross-env --save-dev 就可以了

安装md5加密
npm i md5-js

安装sass
npm i sass-loader node-sass --save-dev
npm i --save-dev extract-text-webpack-plugin    

安装axios
npm i axios

安装vuex
npm i vuex --save-dev

安装excel解析
npm install -S file-saver xlsx
npm install -D script-loader

安装element-ui
npm i element-ui 


npm uninstall webpack
webpack -v
vue -V

有点事情，待会过来编辑,下面是我配置的webpack文件，请参考

const path=require('path');//项目根路径
const ExtractTextPlugin = require('extract-text-webpack-plugin');//样式分类插件
const CleanWebpackPlugin = require('clean-webpack-plugin');//自动删掉之前的旧文件
const HTMLPlugin = require('html-webpack-plugin');//自动引用 webpack 生成的 bundle.js 文件。
const webpack = require('webpack');
const isDev=process.env.NODE_ENV==='development';//development开发环境


const config={
    target:'web',
    entry:path.join(__dirname,'src/main.js'),//路口文件
    //出库文件
    output:{
        filename:'bundle.[hash:8].js',//开发环境的name
        path:path.join(__dirname,'dist')
    },
    //loader加载
    module:{
        //规则
        rules:[
            //解析.vue文件
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            //解析各种文件
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'image/[name].[ext]'
                        }
                    }
                ]
            },
            //解析img 
            {
                test:/\.(gif|jpg|jpeg|png|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:1024,
                            name:'image/[name].[ext]'
                        }
                    }
                ]
            },
        ]
    },
    plugins:[
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV:isDev?'"development"':'"production"'
            }
        }),
        new HTMLPlugin()
    ]
}   

//开发环境
if(isDev){
   
    config.module.rules.push({//不做样式分离
        test:/\.(css|scss)$/,
        use:[
            'style-loader',
            'css-loader',
            {
                loader:'postcss-loader',
                options:{
                    sourceMap:true
                }
            },
           'sass-loader'
        ]
    })

    config.devtool="#cheap-module-eval-source-map"

    config.devServer={
        port:8080,
        host:'localhost',
        overlay:{
            errors:true,
        },
        hot:true
    }

    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),//热加载
        new webpack.NoEmitOnErrorsPlugin()//在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。
    )
}else{
    //生产环境
    config.output.filename='[name]-[chunkhash:8].js'
    config.devtool='cheap-module-source-map'

    config.module.rules.push({//分离样式
        test: /\.(css|scss)$/, 
        use: ExtractTextPlugin.extract({
            fallback:'style-loader',
            use: [
                'css-loader',
                {
                    loader:'postcss-loader',
                    options:{
                        sourceMap:true
                    }
                },
                'sass-loader'
            ],
            publicPath: "/dist/"//编译后输出的css文件
        })
    })
    config.plugins.push(
        new ExtractTextPlugin({
            filename: "style/style.[contentHash:8].css",
            disable: false,
            allChunks: true
        }),
        new CleanWebpackPlugin(['dist']),//生产环境删掉之前的旧文件
    )
}

module.exports=config