标签:生产 androi 初始 exclude public try 多个 scripts query
cnpm init
cnpm install webpack webpack-cli -g
//webpack-cli :来执行webpack相关的命令行
//配置项
"scripts": {
"dev":"webpack --mode development --watch", //开发环境 npm run dev --watch 实时监听
"build":"webpack --mode production", //生产环境 npm run build
"test": "echo \"Error: no test specified\" && exit 1"
},
//默认情况入口是 index.js 出口是dist/main.js
//根目录下创建 webpack.config.js
//webpack配置文件
module.export={
//入口
entry:{
"名字": __dirname + "/src/main.js"
},
//出口
output:{
//打包后文件存储的目录
path: __dirname +"/dist" ,
//打包后的文件名
filename:"aaa.js"
//多个入口时
filename:"[name].js"
}
}
//配置文件修改完要重启服务
1. 安装
cnpm i --save webpack-dev-server
2. 配置
devServer:{
contentBase:'./' //根目录地址
//端口号
port:8080,
proxy:{
}
inline:true //实时刷新开启
}
//package.json
"start" : "webpack-dev-server --mode development"
//cnpm start
3. 不会生成dist文件
//在出口配置
publicPath:"/dist/" 虚拟的路径可以访问到生成的文件
//配置文件
"devtool":"source-map"
//会生成两个文件
main.js
映射文件 main.js.map //映射源代码目录 方便调试
cnpm install style-loader css-loader node-sass postcss-loader --save
//webpack.config.js
module:{
rules:[
{
test:/\.css$/,
loader:'style-loader!css-loader'
//凡是以css结尾的文件 都要经过css-loader style-loader 处理 (!为连接符)
}
]
}
cnpm install babel-loader @babel/core @babel/preser-env @babel/preset-react --save
//ES6?=>?ES5 解决ES6兼容问题
//webpack.config.js
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,//排除文件夹
loader:'babel-loader',
query:{
presets:[es2015]
}
}
]
}
cnpm i --save postcss-loader?autoprefixer?postcss
//webpack.config.js
module:{
rules:[
{
test:/\.css$/,
loader:'style-loader!css-loader!postcss-loader',
}
]
}
//新建postcss.config.js配置文件
module.exports = {
plugins: [
require('autoprefixer')('last 100 versions' )
require('autoprefixer')(
{ browsers:
[
'last 10 Chrome versions',
'last 5 Firefox versions',
'Safari >= 6',
'ie> 8',
'iOS >= 8',
'Android >= 4.4'
]
}
)
]
}
cnpm install url-loader file-loader -D
?/* file-loader?,?url-loader?(文件?copy??到目标文件夹)
(url-loader可以设置图片大小限制,当图片超过限制时,其表现行为等同于
file-loader,而当图片不超过限制时,则会将图片以base64的形式打包进css文件,以减少请求次数。) */
//解析vue
cnpm i --save vue-loader?vue-template-compiler
//配置文件
{ test: /\.vue$/, use: 'vue-loader' } -->插件
const {VueLoaderPlugin} = require("vue-loader")
plugins: [
new VueLoaderPlugin()
]
module.exports?={
?entry:?{
?index:__dirname?+?"/src/index.js"
?},
?output:?{
?path:?__dirname?+?"/dist",?//打包后的文件存放的地方
?filename:?"[name].bundle.js",//打包后输出文件的文件名
?publicPath:"/dist/"?//webpack?output?is?served?from
?},
?devServer:?{
?contentBase:?"./",?//content?not?from?webpack?is?serverd
?port:?'8080',
?inline:?true//实时刷新
?},
?devtool:?'source‐map',
?module:{
?rules:[
?{
?test:?/\.css$/,
?loader:?'style‐loader!css‐loader'//添加对样式表的处理,内联样式
?//loader:?'style‐loader!css‐loader!postcss‐loader'
?},
?{
?test:/\.js$/,?//随便起的test?名字
?exclude:?/node_modules/,?//排除一个
?//?exclude:?/(node_modules|src)/,?//*****排除多个怎么写???
?loader:'babel‐loader',
?query:{
?presets:['es2015']
?}
?},
?//npm?install?‐‐save‐dev?sass‐loader
?//因为sass‐loader依赖于node‐sass,所以还要安装node‐sass
?//?npm?install?‐‐save‐dev?node‐sass
标签:生产 androi 初始 exclude public try 多个 scripts query
原文地址:https://www.cnblogs.com/zhaoxinran997/p/12451999.html