npm init初始化项目
生成package.json 和package-lock.json文件
{
"name": "mywebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
//-save 安装的插件,则是被写入到 dependencies 区块里面去,是发布到生产环境的,
//如jQuery,没有这个包的依赖运行就会报错,这时候就把这个依赖写入dependencies ;
"dependencies": {
"babel-cli": "^6.26.0",
"webpack-cli": "^4.1.0"
},
//用 --save-dev 安装的 插件,被写入到 devDependencies 域里面去,只用于开发环境,不用于生产环境,
//如webpack这些只是在开发中使用的包,上线以后就和他们没关系了,
"devDependencies": {
"extract-text-webpack-plugin": "^3.0.2",
"webpack": "^5.3.1"
}
}
package.json详解以及package-lock.json的作用
、package-lock.json 版本锁定
- 当我们安装依赖时,package-lock.json 文件会自动生成。里面会描述上一次更改后的确切的依赖管理树,包含了唯一的版本号和相关的包信息。之后的 npm install 会根据 package-lock.json 文件进行安装,保证不同环境、不同时间下的依赖是一样的;
- 由于 package-lock.json 文件中记录了下载源地址,可以加快我们的 npm install 速度。
https://www.cnblogs.com/colder/p/11820212.html 转载
创建webpack.config.js配置webapck
var webpack = require('webpack')
// 代码压缩
var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({minimize: true});
// 把公共模块提取出来, 并取名为'common'(名字自起), webpack之后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件
var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');
// 分离.css。将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// 引入jquery
var providePlugin = new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery'});
//生成 html 文件。
html-webpack-plugin
module.exports = {
//model: development生产模式,打包出来的代码未压缩的。production开发模式(上线),打包出来的代码是压缩的
model:'development',
entry: './src/js/entry.js', // 入口文件
output: {
// 输出文件
filename: 'index.js', // 输出文件名
publicPath: __dirname + '/out', // 添加静态资源, 否则会出现路径错误
path: __dirname + '/out' // 输出文件路径
},
// 引入加载器
module: {
rules: [
{test: /.js$/,use: ['babel-loader']}, // es6等语法解析为js
{test: /.css$/,use: ['style-loader', 'css-loader']}, // css
{test: /.(jpg|png|gif|svg)$/,use: ['url-loader?limit=8192&./[name].[ext]']}, // 解析图片
{test: /.less$/,use: ['style-loader', 'css-loader', 'less-loader']} // 解析less文件
// 解析CSS并把CSS通过link引入,即单独生成css,而非内联在js里
// {test:/.css$/,use:ExtractTextPlugin.extract({fallback:'style-loader',use:'css-loader'})},
// var ExtractTextPlugin = require("extract-text-webpack-plugin");//将css独立引入变成link标签形式, 使用该插件需要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改
]
},
// 插件集合
plugins: [uglifyPlugin, CommonsChunkPlugin, new ExtractTextPlugin('[name].css'), providePlugin],
// 安装webpack-dev-server,
// 配置devserver
devServer:{
contentBase: "./", //本地服务器的搭建目录,默认为当前目录
historyApiFallback:true, //启动\(^o^)/~404跳转到index.html
inline:true, //实现自动刷新(必须在命令行输入--inline)
progress:true, //显示打包进程(必须在命令行输入--hot)
hot:true, //实现热加载
port:8080 //设置端口
congress:true // 支持压缩
}
}