"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack --config webpack.config.js"
},在控制台输入npm run build 命令进行打包，打包成功后如图
webpack打包完成后
2.3配置webpack可以加载非Js文件
webpack.config.js文件具体配置
在webpack.config.js中的module: {}模块中添加rules:[]，可以设置webpack需要识别的文件类型，之前已经设置了vue文件类型，好需要添加css/图片。
//webpack.config.js
module: {
rules: [
{
test: /.vue$/,
loader: 'vue-loader'
},
{
test: /.css$/,
use:[
'style-loader',
'css-loader'
] },
{
test: /.(gif|jpg|png|svg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 1024,
name:'[name].[ext]'
}
}] }
]}在控制台执行命令，安装相应的loader
npm i style-loader css-loader url-loader file-loader测试非js类型文件打包效果
目标：在js代码中import这些非js类型的文件中的内容
再src子目录下，创建测试文件test.css。以及在images中放入jpg图片代用（一张就可以了，emmm我当时放多了就先不删了）
src下文件结构
在Index.js中import这些非js文件。
//index.js
import Vue from 'vue'
import App from './app.vue'
import './assets/styles/test.css' //import css文件
import './assets/images/0.jpg' //import 图片
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
render: (h) => h(App)
}).$mount(root)最后在控制台执行
npm run build 测试结果。打包成功图片类似上面。
2.4关于css预处理器。stylus的配置和测试
stylus是css的一种预处理器，文件类型是 .styl 我们这里对其进行配置
首先在webpack.config.js文件中的rules:[]模块中跟上面一样，加入如下代码，让其可以识别.styl文件
//webpack.config.js
{
test:/.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
] }然后在控制台安装stylus所需的loader文件
npm i style-loader stylus-loader最后在控制台执行
npm run build
