webpack打包前端资源项目

npm init   
npm install webpack --save-dev
npm install html-webpack-plugin --save-dev
npm install babel-preset-latest  --save-dev
npm install babel loader babel-core babel-plugin-transform-runtime babel-preset-es2015  babel-runtime --save-dev
npm install style-loader css-loader --save-dev
npm install postcss-loader --save-dev  
npm install autoprefixer --save-dev
npm install html-loader --save-dev 
npm install ejs-loader --save-dev 
npm install file-loader --save-dev
npm install url-loader --save-dev
npm install image-webpack-loader --save-dev

webpack打包命令执行后一直会提示 Pleasl install webpack-cli之类提示
npm install webpack-cli -d 执行后仍然提示 毫无作用
解决方法：全局安装 npm install webpack-cli -g

扩展安装
npm install html-webpack-plugin --save-dev

打包项目css遇到 can't resolve confont.eot .woff .ttf 之类的错误阻碍

image.png
解决方法：1.先更改font文件夹确认为fonts 2.确认报错文件在fonts文件夹里存在并且可用
3.rules 规则如下确保为url-loader

{
 test: /\.woff(\?t=\d+\.\d+\.\d+)?$/,
 use: 'url-loader?limit=100000&mimetype=application/font-woff'
},
{
 test: /\.woff2(\?t=\d+\.\d+\.\d+)?$/,
 use: 'url-loader?limit=100000&mimetype=application/font-woff'
},
{
 test: /\.ttf(\?t=\d+\.\d+\.\d+)?$/,
 use: 'url-loader?limit=100000&mimetype=application/octet-stream'
},
{
 test: /\.eot(\?t=\d+\.\d+\.\d+)?$/,
 use: 'url-loader?limit=100000&mimetype=application/font-eot'
}

打包后网页报错jQuery is not defined、$ is not defined
解决办法

// webpack.config.js plugin  引入
new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
})
// 入口文件中加入index.js
window.$ = require("jquery");

开发实例 webpack.config.js

var webpack = require("webpack");
var path = require("path");
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        login:'./indexLogin.js',
        khdStart:'./indexKhdStart.js'
    },
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: 'js/[name]-bundle.js',
        publicPath: "./"
    }, 
    plugins: [ 
        new htmlWebpackPlugin({       //根目录的index.html生成dist下的html，可以多个生成
            filename: 'login.html',
            template: './src/login.html',   
            inject: 'head',           //script标签的放置
            minify: {                    //html压缩
            //removeComments: true,     //移除注释
            //collapseWhitespace: true //移除空格
            },
            chunks:['login']
        }),
        new htmlWebpackPlugin({       //根目录的index.html生成dist下的html，可以多个生成
            filename: 'khdStart.html',
            template: './src/khdStart.html',   
            inject: 'head',           //script标签的放置
            minify: {                    //html压缩
            //removeComments: true,     //移除注释
            //collapseWhitespace: true //移除空格
            },
            chunks:['khdStart']
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],
    module:{
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname,'/src'),
                exclude: path.resolve(__dirname,'/node_modules')
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!postcss-loader!sass-loader' 
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.tpl$/,
                loader: 'ejs-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader'
            },
            {
                test: /\.woff(\?t=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=100000&mimetype=application/font-woff'
            },
            {
                test: /\.woff2(\?t=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=100000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?t=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=100000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?t=\d+\.\d+\.\d+)?$/,
                use: 'url-loader?limit=100000&mimetype=application/font-eot'
            }
        ]
    }
}

项目结构

image.png

踩了些webpack的雷，在此列出部分error的解决及示例，如更好的解决方式和代码问题请各路大神下方评论交流