额工作了三年都没写过博客。
现在开始养成习惯吧。
拉下的技术是时候学回来了,看了一天的webpack入门。
项目使用webpack步骤:
1、项目文件初始目录
根目录--/app/--main.js //入口文件
--...js
--/public/--index.html
--...html
2、运行命令
npm install --save-dev webpack
//安装到你的项目目录
npm init
npm install --save-dev webpack// 安装Webpack
npm instal--save-dev webpack-dev-server//安装Webpack-dev-server构建本地服务器
3、根目录下新建一个名为webpack.config.js
的文件
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
4、在package.json中的scripts对象中添加如下命令,用以开启本地服务器:
......
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
}
......
在终端中输入npm run server即可在本地的8080端口查看结果
用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包
// npm一次性安装多个依赖模块,模块之间用空格隔开、(react还没学。。。,就不装了)
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
webpack.config.js 更新
......
module: {
rules: [{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env",
// "react"
]
}
},
exclude: /node_modules/
}]
}
......
css(一切皆模块)
npm install --save-dev style-loader css-loader
npm install --save-dev postcss-loader autoprefixer
.....
module: {
rules: [
......,
{
test: /\.css$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]
}
] }......
接下来,在webpack配置文件中添加postcss-loader,在根目录新建postcss.config.js,并添加如下代码之后,重新使用npm start打包时,你写的css会自动根据Can i use里的数据添加不同前缀了。// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
最后完结。参考文章,感谢作者,指点迷津