1.前(fei)言(hua)
webpack是什么我在这里就不多说了,实在不知道的可以直接在去搜一下,都一大堆答案。关于用webpack怎么构建项目,方法也是多种多样,五花八门。今天,我就写下我平常构建项目的方式,这个方式我觉得比较便捷和简单粗暴,如果有什么要指出的,也欢迎大家评论,毕竟我也只是一个前端新人。
2.步骤
第一步,在目录建个文件夹
为了方便,我在编辑器打开这个目录了
第二步,创建package.json配置文件
输入命令行 $ npm init
依次输入,
从上往下就是,项目名称,迭代版本,项目说明,主入口文件,封装的可执行命令,作者的一些信息,源协议名称。
这应该就是最简单的配置文件了。
第三步,安装webpack依赖
如果之前没全局安装过webpack,就先安装一下
$ npm install webpack -g
然后安装项目依赖
$ npm install webpack --save-dev
然后就会看到package.json里面多了一行
这就说明安装成功了。
第四步,创建并配置webpack.config.js
创建webpack.config.js之前,先创建一个index.js和index.html,一个为入口文件,一个为普通的html文件
完了之后,目录就应该是这样的
在index.js里面写上这行测试用途的代码
document.write("hello world");
之后,创建一个webpack.config.js,代码如下
let path = require('path');
let webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
path: path.join(__dirname, 'dist'), //输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它
filename: "bundle.js"
},
module: {
rules: [
]
}
};
这个也应该是最基础的webpack.config.js了
然后执行 $ webpack
这个命令就是打包输出,执行完了之后,会看到,文件夹上多了一个dist文件夹,里面有个bundle.js,这个就是打包输出之后的文件夹和文件。需要的就是这些。
第五步,测试结果
在index.html引入之前输出的bundle.js。
最后,在随便一个浏览器,打开index.html
大功告成!上面这里写了很多,但实际上操作起来就是分分钟的事情,当然这是最简单的从零开始。
3.简单粗暴的搭建
如果真要最简单的构建项目,更简单的方法是,直接从别的项目拷贝package.json这个配置文件,然后执行
$ npm install
完了之后,在里面应该有配置的的,就都安装完成了,附上一段我常用的配置
package.json
{
"name": "test3",
"version": "1.0.0",
"description": "测试版",
"dependencies": {},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.18.0",
"browser-sync": "^2.18.2",
"css-loader": "^0.25.0",
"ejs-compiled-loader": "^2.1.1",
"element-ui": "^1.2.5",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"glob": "^7.0.6",
"gulp": "^3.9.1",
"gulp-file-include": "^1.0.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.22.0",
"iview": "^2.0.0-rc.5",
"node-sass": "^3.7.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.0.2",
"scss-loader": "0.0.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"vue": "^2.2.6",
"vue-loader": "^10.0.2",
"vue-resource": "^1.0.3",
"vue-router": "^2.4.0",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.2.1",
"vuex": "^2.0.0",
"webpack": "^1.13.2",
"webpack-dev-server": "^1.15.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --hot --inline"
},
"author": "chen"
}
webpack.config.js
let path = require('path');
let webpack = require('webpack');
let serverHost = "localhost";
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'), //输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它
publicPath: '/dist/',
filename: "bundle.js"
},
//加载器
module: {
loaders: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.html$/,
loader: "raw-loader"
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!sass-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
//图片加载器,雷同file-loader,更适合图片,可以将较小的图片转成base64,减少http请求
//如下配置,将小于8192byte的图片转成base64码
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=images/[hash].[ext]'
}
]
},
vue: {
loaders: {
scss: ['vue-style-loader', 'css', 'sass'].join('!')
}
},
plugins: [
new HtmlWebpackPlugin({
title:"test3",
filename:"./dist/index.html",//输出html文件,打包时插入js,不用自己手动引入
inject: 'body', //js插入的位置,true/'head'/'body'/false
hash: true
}),
],
//使用webpack-dev-server
devServer: {
contentBase: './',
host: serverHost,
port: 9090, //默认9090
inline: true, //可以监控js变化
hot: true//热启动
},
//使用vue2.x的一个配置
resolve: {
alias: {vue: 'vue/dist/vue.js'}
}
};
大家执行$ webpack
就知道大概的区别了。在运行dist里面的index.html,就知道区别了
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。