1.初始化npm init
https://blog.csdn.net/zhaileilei1/article/details/81539799**
2.复制package.json,webpack.config.js**
package.json
{
"name": "guangfa",
"version": "1.0.0",
"main": "webpack.config.js",
"dependencies": {
"babel-cli": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"cnpm": "^6.0.0",
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"less-plugin-clean-css": "^1.5.1",
"style-loader": "^0.23.1",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
},
"devDependencies": {
"@babel/cli": "^7.0.0-beta.40",
"@babel/core": "^7.0.0-beta.40",
"@babel/preset-react": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-2": "^6.24.1",
"exports-loader": "^0.7.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"html-withimg-loader": "^0.1.16",
"imports-loader": "^0.8.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"postcss-loader": "^3.0.0"
},
"scripts": {
"dev": "webpack --watch --mode development",
"build": "webpack --mode production",
"start": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"description": ""
}``
webpack.config.js
const webpack = require('webpack');
const htmlplugin=require("html-webpack-plugin");
const extractcss=require("extract-text-webpack-plugin");
const CleanCSSPlugin = require('less-plugin-clean-css');
console.log(path.join(__dirname,'src')+"/js/createjs.js");
module.exports={
entry: {
index:'./src/js/index.js'
},
output:{
filename:'bundle.js',
path:path.resolve(__dirname,'./dist'),
},
devServer:{
contentBase:"./dist",
inline:true,
port:5300
},
//第三方库引入
resolve:{
alias:{ //别名
createjs:"./js/createjs.js" ,
jquery:path.resolve(__dirname,'./src/js/jquery-1.11.1.min.js')
}
},
module: {
rules: [
{
// test 表示测试什么文件类型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:extractcss.extract({
fallback:'style-loader', // 回滚
use:[ { loader: 'css-loader'}],
publicPath:'../' //解决css背景图的路径问题
})
},
{
test:/\.less$/,
use:extractcss.extract({ //分离less编译后的css文件
fallback:'style-loader',
use:[ { loader: 'css-loader'}
,'less-loader'],
})
},
//es6处理模块
{
test: /\.js$/,
exclude: __dirname+'node_modules',
include: __dirname+'src',
loader: 'babel-loader',
options: {
presets: ['env']
}
},
//图片处理模块
{
test:/\.(jpg|png|jpeg)$/,
use:'file-loader?limit=1024&name=../img/[name].[ext]'
},
// {
// test: /\.html$/,
// loader: 'html-widthimg-loader',
// },
{
test:/\.(woff|ttf|svg|eot|woff2)$/, //字体图标
use:'file-loader?limit=1024&name=./fonts/[name].[ext]' //加路径
},
]
},
plugins:[
new htmlplugin({
template:"./src/index.html",
// filename:"a.html"
minify:{
removeAttributeQuotes:true, //去除引号
removeComments:true, //去除注释
removeEmptyAttributes:true, //去除空属性
// collapseWhitespace:true //去除空格回车
}
}),
new extractcss('./less/index.css'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
//vendor的第三方库打包
// new webpack.optimize.splitChunk({
// name:'vendor'
// })
]
}