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打包命令執(zhí)行后一直會提示 Pleasl install webpack-cli之類提示
npm install webpack-cli -d 執(zhí)行后仍然提示 毫無作用
解決方法：全局安裝 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 規(guī)則如下確保為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'
}
打包后網(wǎng)頁報錯jQuery is not defined雇卷、$ is not defined
解決辦法
// webpack.config.js plugin 引入
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
// 入口文件中加入index.js
window.$ = require("jquery");
開發(fā)實例 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'
}
]
}
}
項目結(jié)構(gòu)
image.png
踩了些webpack的雷伟件，在此列出部分error的解決及示例，如更好的解決方式和代碼問題請各路大神下方評論交流
