webpack3 写个项目的空架子

webpack3 写个项目的空架子

---

项目目录:

开发工具 : webstorm
1: npm init -y
2:npm i –save-dev [email protected]和npm i –save-dev [email protected]

3.安装loader

    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-dynamic-import-webpack": "^1.0.2",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "copy-webpack-plugin": "^4.5.2",
    "extract-text-webpack-plugin": "^3.0.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.0",
    "less-loader": "^4.1.0",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.7.1"

1. 配置webpack.config.js文件

const path = require('path');
const webpack = require("webpack");
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
function resolve(relatedPath) {
    return path.join(__dirname, relatedPath);
}
module.exports = {
    entry : {
        "main":"./src/main.js"
    },
    output: {
        filename:'[name].js',
        path:path.resolve(__dirname,"dist")
    },
    module:{
        rules: [
            {
                test: /\.html$/,
                loaders: ['raw-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.tpl$/,
                loader: 'html-loader'
            },
            {//引入less
                test: /main\.less$/,
                loaders: ['style-loader','css-loader','less-loader']
            },
            {
                test: /\.less$/,
                exclude: /main\.less$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader','less-loader?sourceMap']
                })
            },

            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        plugins: ['syntax-dynamic-import']
                    },

                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
            },
            {
                test: /\.(woff?|eot|ttf|otf|svg|woff2)(\?.*)?$/,
                loader: 'url-loader'
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },

        ]
    },
    plugins:[
        new ExtractTextPlugin({
            filename: 'main.css',
            ignoreOrder: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
            // filename:"vendor.js"//忽略则以name为输出文件的名字，否则以此为输出文件名字
        }),
        new htmlWebpackPlugin({
            template:"./src/index.html",
            filename:"index.html",
            favicon:'./src/favicon.png' //favicon路径                
        }),
        new CopyWebpackPlugin([
            {from:"./src/assets",to:"assets"},

        ]),
        new webpack.HotModuleReplacementPlugin()
    ],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.js',
            'assets':resolve('./src/assets'),
        },
        extensions: ['.js', '.vue','.css'],
    },
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        port: 8484,
        inline: true,//实时刷新
        hot: true//自动刷新
    },

}

5.配置启动和打包命令

 "start": "webpack-dev-server --open",
 "build": "node_modules/.bin/webpack"

执行 npm start 就成功了